class Magnifier {
	constructor(newSmallBox, newMask, newBigBox, oli, img) {
		this.oSmallBox = newSmallBox;
		this.oMask = newMask;
		this.oBigBox = newBigBox;
		this.oli = oli;
		this.img = img;
	}
	onmouseover() {
		let that = this;
		this.oSmallBox.onmouseover = function() {
			that.oBigBox.style.display = "block";
			that.oMask.style.display = "block";
		}
	}

	onmouseout() {
		let that = this;
		this.oSmallBox.onmouseout = function() {
			that.oBigBox.style.display = "none";
			that.oMask.style.display = "none";
		}
	}

	onmousemove() {
		let that = this
		this.oSmallBox.onmousemove = function(evt) {
			let e = evt || event;
			let left = e.pageX - that.oSmallBox.offsetLeft - that.oMask.offsetWidth / 2;
			let top = e.pageY - that.oSmallBox.offsetTop - that.oMask.offsetHeight / 2;

			if (left < 0) {
				left = 0
			}
			if (top < 0) {
				top = 0
			}
			let maxleft = that.oSmallBox.offsetWidth - that.oMask.offsetWidth;
			if (left > maxleft) {
				left = maxleft;
			}
			let maxtop = that.oSmallBox.offsetHeight - that.oMask.offsetHeight;
			if (top > maxtop) {
				top = maxtop;
			}

			that.oMask.style.left = left + "px";
			that.oMask.style.top = top + "px";

			let x = that.oBigBox.offsetWidth * left / that.oMask.offsetWidth;
			let y = that.oBigBox.offsetHeight * top / that.oMask.offsetHeight;

			that.oBigBox.style.backgroundPositionX = -x + "px";
			that.oBigBox.style.backgroundPositionY = -y + "px";


		}
	}

	onclick() {
		let that = this;
		for (let i = 0; i < this.oli.length; i++) {
			this.oli[i].onmousemove = function() {
				that.oSmallBox.style.backgroundImage = `url(./img/login/${i}.jpg)`;
				that.oBigBox.style.backgroundImage = `url(./img/login/${i}.jpg)`;
				
			}
		}
	}


}

let oSmallBox = document.getElementById("productBigImg");
let oMask = document.querySelector(".iqZoomPup");
let oBigBox = document.querySelector(".zoomdiv");
let oli = $(".list-ul li");
let img = $(".bigimg")
let m = new Magnifier(oSmallBox, oMask, oBigBox, oli, img);
m.onmouseover();
m.onmouseout();
m.onmousemove();
m.onclick();


